<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 7.11 (457846)"/><meta name="author" content="tian18840876830@163.com"/><meta name="created" content="2018-07-03 13:39:21 +0000"/><meta name="source" content="desktop.mac"/><meta name="source-url" content="https://gems.ruby-china.org/"/><meta name="updated" content="2019-08-02 03:18:57 +0000"/><title>day20_Sass</title></head><body style="zoom: 1.992168;"><div><span style="font-size: 18px; font-weight: bold;">学习目标：</span></div><div>1.Sass的简介</div><div>2.sass的安装环境</div><div>3.sass的语法格式及编译调试</div><div>4.sass的基本特性-基础</div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">一、什么是CSS预处理器？</span></font></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 14px;">定义：</font></span></div><div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">增加了一些编程的特性，将</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。</span></font></div><div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">通俗的说，</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">“CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">预处理器用一种专门的编程语言，进行</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">Web</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">页面样式设计，然后再编译成正常的</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">文件，以供项目使用。</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">预处理器为</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">增加一些编程的特性，无需考虑浏览器的兼容性问题</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">”</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">，例如你可以在</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">中使用</span><span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量</span><span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">$color</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); color: rgb(255, 38, 0); font-family: Monaco;">）</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">等等在编程语言中的一些基本特性，可以让你的</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">CSS</span> <span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); color: rgb(255, 38, 0); font-family: Monaco;">更加简洁、适应性更强、可读性更佳，更易于代码</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco; color: rgb(51, 51, 51);">的维护</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(51, 51, 51);">等诸多好处。</span></font></div></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-family: Monaco;"><font color="#0433FF">其它 CSS 预处理器语言：</font></span></div><div><span style="font-family: Monaco;"><font color="#0433FF">CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的 CSS 预处理器语言，比如说：</font></span></div><div><span style="font-family: Monaco;"><font color="#0433FF">Sass（SCSS）            Turbine</font></span></div><div><span style="font-family: Monaco;"><font color="#0433FF">LESS                   Swithch CSS</font></span></div><div><span style="font-family: Monaco;"><font color="#0433FF">Stylus                 CSS Cacheer</font></span></div><div><span style="font-family: Monaco;"><font color="#0433FF">DT CSS</font></span></div><div>https://www.sass.hk/docs/</div></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue'; font-weight: bold;">二、什么是sass？</span></font></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">官网上是这样描述</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的：</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是一门高于</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CSS</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的元语言，它能用来</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 41, 1); font-family: Monaco;"><font color="#FF2600">清晰地、结构化</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">地描述文件样式，有着比普通</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CSS</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">更加强大的功能。</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">能够提供</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 40, 4); font-family: Monaco;"><font color="#FF2600">更简洁、更优雅的语法，同时提供多种功能</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">来创建可维护和管理的样式表。</span></font></div></div><div style="font-size: 14px;"><div><br/></div><div><br/></div></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">三、sass和scss有什么区别？</span></font></div><div style="font-size: 14px;"><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SCSS</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">其实是同一种东西，我们平时都称之为</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，两者之间不同之处有以下两点：</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件扩展名不同，</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是以</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#000000">“</font><b><font color="#FF2600">.sass”</font></b></span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><b><font color="#FF2600">后缀为扩展名</font></b></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，而</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SCSS</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是以</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">“</span><font color="#FF2600"><b><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">.scss”</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">后缀为扩展名</span></b></font></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">语法书写方式不同，</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <font color="#FF2600"><b><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是以</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">严格的缩进式语法规则来书写，不带大括号</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">({})</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">和分号</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">(;)</span></b></font><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，而</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SCSS</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的语法书写和我们的</span> <font color="#FF2600"><b><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CSS</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">语法书写方式</span></b></font><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">非常类似。</span></font></div></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/C79F6AAB-DB8C-4A2C-B6B4-1A5577D0CA8A.png" height="168" width="311"/><img src="day20_Sass.html.resources/06C45D55-83A8-4ABA-96BE-3BFD0ED4D8B4.png" height="305" width="342"/><br/></span></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">四、sass安装（windows版本）</span></font></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">4.1</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">在</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Windows</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">平台下安装</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">需要先有</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">安装包，大家可以到</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;"><font color="#000000">的官网</font><font color="#0433FF">（</font></span><a href="http://rubyinstaller.org/downloads" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px; color: rgb(4, 51, 255);"><font color="#0433FF">http://rubyinstaller.org/downloads</font></a><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;"><font color="#0433FF">）</font><font color="#000000">下载对应需要的</font></span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">版本。</span></div><div><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">安装文件下载好后，可以按应用软件安装步骤进行安装</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">。在安装过程中，个人建议将其安装在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">C</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">Ruby</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; font-size: 12px;">环境的情况）</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/DE733881-0ECC-4E52-BF9D-2585EE2592A0.png" height="190" width="353"/><img src="day20_Sass.html.resources/52678464-1E35-4543-99A0-1009198E1CED.png" height="273" width="366"/><br/></span></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div><font face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; color: rgb(51, 51, 51); font-weight: bold;">4.2</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Ruby</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">安装完成后，在开始菜单中找到新安装的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Ruby</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，并启动</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Ruby</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Command</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">控制面板，如下图所示：</span></font></div></div><div style="font-size: 14px;"><div><span style="font-size: 12px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="day20_Sass.html.resources/AA4ABE5B-A034-4260-9A8B-1A312BB448CE.png" height="347" width="242"/><br/></span></div><div><br/></div></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">当你的电脑中安装好</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Ruby</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">之后，接下来就可以安装</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">了。同样的在</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">windows</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下安装</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">有多种方法。但这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"> </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">  1</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">、通过命令安装</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Sass</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">打开电脑的命令终端，输入下面的命令：</span></font></div><div><font color="#589B11" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(142, 250, 0); font-family: Monaco;">gem install sass</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">提醒一下，在使用</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Mac</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的同学，可能需要在上面的命令前加上</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"sudo"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，才能正常安装：</span></font></div><div><font color="#579911" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(142, 250, 0); font-family: Monaco;">sudo gem install sass</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">  2</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">、本地安装</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Sass</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">可</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">以到</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 147, 0); font-family: Monaco;"><font color="#0433FF">Rubygems(<a href="http://rubygems.org/" style="color: rgb(4, 51, 255);">http://rubygems.org/</a>)</font></span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">网站上将</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的安装包</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 147, 0); font-family: Monaco;">（</span><a href="http://rubygems.org/gems/sass" style="color: rgb(4, 51, 255); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 147, 0); font-family: Monaco;">http://rubygems.org/gems/sass</a><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 147, 0); font-family: Monaco;">）</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下载下来，然后在命令终端输入：</span></font></div><div><font color="#00900E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(142, 250, 0); font-family: Monaco;">gem install &lt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(142, 250, 0); font-family: Monaco;">把下载的安装包拖到这里</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(142, 250, 0); font-family: Monaco;">&gt;</span></font></div></div><div style="font-size: 14px;"><br/></div><div><font face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; color: rgb(51, 51, 51); font-weight: bold;">4.3</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">由于国内网络原因（你懂的），导致</span> <a href="http://rubygems.org/" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(4, 180, 11);">rubygems.org</a> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">存放在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Amazon S3</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">上面的资源文件间歇性连接失败。这时候我们可以通过</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">gem sources</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">命令来配置源，先移除默认的</span><a href="https://rubygems.org/" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(4, 180, 11);">https://rubygems.org</a><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">源，然后添加淘宝的源 <span style="font-family: Monaco; font-size: 11pt; color: rgb(4, 180, 11);"><a href="https://gems.ruby-china.com/" style="color: rgb(236, 77, 60); touch-action: manipulation; font-family: &quot;PingFang SC&quot;, &quot;Noto Sans&quot;, Roboto, Helvetica, Arial, &quot;Microsoft Yahei&quot;, sans-serif; font-size: 15px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: 0.45px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">https://gems.ruby-china.com</a></span></span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以</span></font><font color="#04B40B"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">输入</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sass</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">安装命令</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">gem install sass</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">了</span></font></font></div></div><div style="font-size: 14px;"><div><span style="font-size: 12px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="day20_Sass.html.resources/4320450D-B580-4AE1-BEF1-6785342CF77A.png" height="215" width="916"/><br/></span></div><div><br/></div></div><div><font face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; color: rgb(51, 51, 51); font-weight: bold;">4.4sass的语法格式</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这里说的</span> <span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Sass</span> <span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">语法是</span> <span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Sass</span> <span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">的最初语法格式</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(0, 0, 0);">，他是</span><span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">通过</span> <span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">tab</span> <span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">键控制缩进的一种语法规则</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(0, 0, 0);">，而且这种缩进要求非常严格。另外其</span><span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">不带有任何的分号和大括号</span><span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。常常把这种格式称为</span> <span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="color: rgb(0, 0, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">老版本，其文件名以</span><span style="color: rgb(255, 38, 0); font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">“.sass”</span><span style="font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; color: rgb(0, 0, 0);">为扩展名。</span></font></div><div><br/></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在整个</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">代码中，我们没看到类似</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CSS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中的大括号和分号。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">注：</span></font><span style="font: 18.0px 'PingFang SC'; font-kerning: none; font-variant-ligatures: no-common-ligatures; color: #ff2600; -webkit-text-stroke: 0px #ff2600; font-family: Monaco;">这种语法格式对于前端人员都不太容易接受，而且容易出错。</span></div></div><div style="font-size: 14px;"><span style="font-size: 12px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="day20_Sass.html.resources/FE6CD76C-E161-43C9-A56F-4A749EE1F6F4.png" height="94" width="356"/><br/></span></div><div style="font-size: 14px;"><span style="font-size: 12px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="day20_Sass.html.resources/6A7ADB45-4D98-47D7-91CF-7979D71C50D7.png" height="166" width="356"/><img src="day20_Sass.html.resources/E174801E-948A-4745-B158-AF235718441B.png" height="183" width="341"/><br/></span></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div><font style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue'; font-weight: bold;">五、sass命令编译</span></font></div><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue'; font-weight: bold;">一些Linux命令</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;">cd 路径   进入某一个目录</font></div><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;">在windows下，先切换盘符   D:  C:</font></div><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;">dir  windows查看当前目录下的文件</font></div><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 9pt; color: rgb(51, 51, 51); font-family: Monaco;">小技巧   写名称的一部分+tab 自动补齐</span></font></div><div><font color="#333333" face="Helvetica Neue" style="font-size: 18px;"><span style="font-size: 9pt; color: rgb(51, 51, 51); font-family: Monaco;">cd .. 返回上一级目录</span></font></div></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">命令编译是指使用你电脑中的命令终端，通过输入</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">指令来编译</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/F6B9E4EA-6897-482D-BE67-942050DB254D.png" height="27" width="449"/><br/></span></div><div style="font-size: 14px;"><span style="font-size: 12px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="day20_Sass.html.resources/FBCFBF02-D88C-4B9F-8D3D-5B7E6707F9D9.png" height="26" width="434"/><br/></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">单文件编译：</span></font></div><div><font color="#03B90A" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">源文件路径</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">目的文件路径</span></font></div><div><font color="#03B90A" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">【注】上述两个路径都是相对于当前所处文件夹的路径</span></font></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">缺点及解决方法：</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">“.scss”</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">时，开启</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">“watch”</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：</span></font></div><div><font color="#04B40B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">sass --watch</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">源文件路径</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">目的文件路径</span></font></div><div><font color="#04B40B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">【注】</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">ctrl+C</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">可以终止监听，如果这里失效，也没有关系，我们在后续会教给大家别的编译方式。</span></font></div></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">六、sass不同样式风格的输出方法</span></font></div><div style="font-size: 14px;"><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">众所周知，每个人编写的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CSS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写。在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：</span></font></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">嵌套输出方式</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">nested         </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(0, 249, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"> </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(12, 135, 13);">(sass --watch test.scss:test.css --style nested)</font></span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">展开输出方式</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">expanded        </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(9, 160, 12);">(sass --watch test.scss:test.css --style expanded)</font></span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">紧凑输出方式</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">compact         </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(12, 142, 13);">(sass --watch test.scss:test.css --style compact)</font></span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">     </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">单行</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">CSS</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">样式</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">压缩输出方式</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">compressed     </span> <font style="color: rgb(12, 142, 13);"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">(sass --watch test.scss:test.css --style compressed)</span></font> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">去掉注释及空格压缩</span></font></div><div><br/></div><div><span style="font-size: 11pt; color: rgb(255, 38, 0); font-family: Monaco;">开发版本(可阅读性要非常好，严格代码缩进)</span></div><div><span style="font-size: 11pt; color: rgb(255, 38, 0); font-family: Monaco;">.css</span></div><div><span style="font-size: 11pt; color: rgb(255, 38, 0); font-family: Monaco;">.js</span></div><div><span style="font-size: 11pt; color: rgb(255, 38, 0); font-family: Monaco;">上线版本/生产环境(压缩版本)</span></div><div><span style="font-size: 11pt; color: rgb(255, 38, 0); font-family: Monaco;">.min.css</span></div><div><span style="font-size: 11pt; color: rgb(255, 38, 0); font-family: Monaco;">.min.js</span></div><div><br/></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/75266AEB-3E07-499A-B8A2-B4257FCD5D18.png" height="114" width="722"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">七、sass语法</span></font></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.1声明变量-普通变量-默认变量-特殊变量-全局变量</span></font></div><div><span style="-webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255);"><span style="font-size: 14px; font-family: 'Helvetica Neue'; font-style: normal; font-variant-caps: normal; font-variant-ligatures: no-common-ligatures; font-weight: normal; line-height: normal;">定义变量的语法：</span></span></div><div><img src="day20_Sass.html.resources/4DB95024-AAB8-4AF2-B72A-AC0C0D5C2C39.png" height="146" width="374"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">普通变量</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">定义之后可以在全局范围内使用。</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">$fontSize: 12px;</font></span></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">body{</font></span></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">    font-size:$fontSize;</font></span></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">}</font></span></div></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">默认变量</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的默认变量仅需要在值后面加上</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">!default</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">即可。</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">$baseLineHeight:1.5 !default;</font></span></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">body{</font></span></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">    line-height: $baseLineHeight;</font></span></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">}</font></span></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">只需要重新声明下变量即可</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font style="font-size: 14px;"> </font></span></div></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">全局变量</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">——</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在变量的后面加上</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(4, 51, 255);">[!global]</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">即可声明全局变量。</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">sass</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规划是</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">3.4</span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">以</span></font><span style="font-family: Monaco; -webkit-text-stroke-color: rgb(255, 255, 255); font-size: 14px; color: rgb(0, 0, 0);">后的版本中就会增加这个功能。</span></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/373FEC9A-80A9-4961-85BC-CF95BC687746.png" height="365" width="423"/><img src="day20_Sass.html.resources/767C0FE6-729A-479C-9628-5D3EA6446D21.png" height="268" width="450"/><br/></span></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">为属性或者其他的特殊情况下，必须使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">#{$variable}</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的形式进行调用。</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#FF2600"> </font></span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#FF2600">#{$variable}  </font><font color="#000000"> </font></span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">就是取值的一种特殊形式，符合特殊用法。</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/B8900BCA-8448-44C3-BC30-F4872A855F3F.png" height="296" width="560"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.2sass嵌套-选择器嵌套</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">    SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">择器嵌套方案</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">【注】在嵌套的过程中，如果需要用到父元素，在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">中通过</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">&amp;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">符号引用父属性</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/27316435-8EEF-48FB-BAD9-96CCB8C69106.png" height="307" width="386"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.3sass嵌套-属性嵌套</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">嵌套属性</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">——</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">不常用</span></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">所谓属性嵌套，是指某些属性拥有同样的单词开头，</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">如：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">wborder-color</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">都是以</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">border</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">开头的，所以就出现了属性嵌套语法</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/AD883359-02E9-4F7D-B6FE-0649A47E84EA.png" height="315" width="522"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.4sass混合-Mixin</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中可以通过</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">@mixin</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">声明混合，可以传递参数，参数名称以</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">开始，多个参数之间使用</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">逗号分隔，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font style="color: rgb(255, 38, 0);">@mixin</font></span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的混合代码块由</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#FF2600">@include</font></span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">来调用</span></font></div></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><span style="font-size: 14px; font-family: 'Helvetica Neue';">无参数混合</span></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/6A70FFC8-75A3-47FE-91D3-54A879EE43A2.png" height="135" width="449"/><br/></span></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/838BD3F7-2DDA-412B-AC1E-86D67777EE54.png" height="117" width="620"/><br/></span></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/2A9D2445-2CC5-43A1-A56F-93F342A365C8.png" height="385" width="588"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.5sass继承拓展-@extend</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中，通过继承</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">/</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的样式。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">继承某个样式的同时，也会继承样式的扩展。</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/949FB007-37D4-4E9B-AAE3-8186D81C25EB.png" height="202" width="407"/><img src="day20_Sass.html.resources/CE976620-4144-43C4-BA58-EED8E299AA97.png" height="202" width="422"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.6Partitials和@import</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Partials</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是用来定义公共样式或者组件的样式的，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">专门</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">用于被其他的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">scss</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">文件</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">import</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">进行使用的</span></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SCSS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件中引入指令</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">@import</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">在引入</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Partials</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">文件时，不需要添加下划线。详细参</font></span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">考案例代码。</span></font></div><div><br/></div><div><span style="font-size: 11pt; font-family: Monaco;">声明公共样式，公共样式文件要以 _</span></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/0B8A3988-7381-404A-9C13-CDE87C2253CB.png" height="134" width="395"/><img src="day20_Sass.html.resources/07FD5192-FCF7-4362-B95E-02433B289BD2.png" height="134" width="395"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.7sass注释</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><b><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中提供了三种注释</span></b></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">多行注释</span><font><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"> </span> <font color="#000000"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在编译输出的</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">css</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件中会保留，压缩输出格式中不会保留</span></font></font> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font style="color: rgb(9, 162, 12);">--style compressed</font></span></font></div><div><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#09A20C" style="font-size: 14px;">/*</font></span></div><div><font color="#09A20C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">*</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">多行注释</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#09A20C" style="font-size: 14px;">*/</font></span></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">单行注释</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"> </span><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">  </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在输出</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">css</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件时不保留</span></font></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">     </span></font> <font color="#07A80B"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">//</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">单行注释</span></font></font></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">强制注释</span><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"> </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在多行注释的开头，添加感叹号！表示强制保留</span></font></font></div><div><font color="#07AA0B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">/*!</span></font></div><div><font color="#07AA0B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">*</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">强制注释</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#07AA0B" style="font-size: 14px;">*/</font></span></div></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.8sass数据类型</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><b><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Sass</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">支持</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">7</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">种主要的数据类型</span></b></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt; 数字</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">1.2, 13, 10px)</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">字符串</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"foo", 'bar', baz)</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">颜色</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">blue, #04a3f9, rgba(255, 0, 0, 0.5))</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">布尔值</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">true, false)</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">空值</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">null)</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">列表</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(list)</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，用空格或逗号分隔</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：c</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">1.5em 1em 0 2em, Helvetica, Arial,</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000" style="font-size: 14px;">sans-serif)</font></span></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">映射</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">例如：</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(key1: value1, key2: value2))  map映射  键-&gt;值</span></font></div></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.9数字&amp;数字函数</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中可以对数字进行运算</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">同时</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">支持数字函数的运算</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/584D347B-D8F4-47C0-BC67-BF885E5B8903.png" height="250" width="547"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.10sass字符串</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">支持字符串的操作</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">同时</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">对字符串的操作有一些封装的函数的支持，方便快捷的处理字符串操作。</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#07AB0B">更多操作请参考官方文档。</font></span> <a href="http://sass.bootcss.com/docs/sass-reference/" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">http://sass.bootcss.com/docs/sass-reference/</a></font></div></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/94BCC3B6-9FC2-404D-B7BB-104E85DC3516.png" height="231" width="615"/><br/></span></font></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.11sass颜色</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">颜色的表示有很多种</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">十六进制</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Hex</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">#ff0000</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">等等</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt; RGB:rgb(255, 0, 0)</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">等等</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">字符串：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">red, blue, green</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">等等</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">等等</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">.. ..</span></font></div><div><font color="#08A40C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">【注】</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">支持所有这些颜色的表示方式</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">相信大家对这些颜色的表示方式应该非常熟悉了</span></font></div><div><span style="font: 18.0px 'PingFang SC'; font-kerning: none; font-variant-ligatures: no-common-ligatures; color: #ff2600; -webkit-text-stroke: 0px #ff2600; font-family: Monaco;">颜色函数</span><span style="font: 18.0px Helvetica; font-kerning: none; font-variant-ligatures: no-common-ligatures; color: #ff2600; -webkit-text-stroke: 0px #ff2600; font-family: Monaco;">——rgb &amp; rgba</span></div><div><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 18px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">通过</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 18px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">rgb()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 18px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的形式进行颜色的控制【红、绿、蓝】</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/34F796F2-B380-4C37-9B0B-BF0993124B6D.png" height="41" width="548"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.12sass列表-list</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">list</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">表示列表类型的值</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CSS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中就是表示属性的一串值</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">列表中的值可以使用空格或者逗号分隔，如</span></font></div><div><font color="#09A10C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; border:#ccc solid 1px;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">值就是列表</span></font></div><div><font color="#09A10C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; font-family:Courier, “Lucida Console”, monospace;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">值也是列表</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">列表中可以包含其他的列表，如：</span></font></div><div><font color="#08A40C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; padding:10px 5px, 5px 5px;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">值的列表中有两个列表，用逗号分隔</span></font></div><div><font color="#08A40C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; padding:(10px 5px) (5px 5px);</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">可以用括号分开，编译成</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">css</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">时会去掉这些括号</span></font></div></div><div style="font-size: 14px;"><br/></div><div><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">列表函数</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中的列表相当于其他语言中的数组，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">也提供了一些函数方便列表的操作</span></font></div><div><font color="#00A10E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">length:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取列表长度</span></font></div><div><font color="#00A10E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">nth:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取指定位置的列表项</span></font></div><div><font color="#00A10E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">index:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取某个元素在列表中的位置，如果没有查询到返回</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">null</span></font></div><div><font color="#00A10E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">append:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">给指定的第一个列表添加一个列表项</span></font></div><div><font color="#00A10E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">join:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">合并列表</span></font></div></div><div style="font-size: 14px;"><span style="font-size: 14px;"><img src="day20_Sass.html.resources/03D301FD-5B7E-4824-98C7-45BD18C4F911.png" height="330" width="548"/><br/></span></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.13sass映射map</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">就是列表项目中带名称的列表</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  $map</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(key1:value1, key2:value2, key3:value3)</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  $var(key1:value1, key2:value2..):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">声明一个</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Map</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  length($map):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中的元素对个数</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  map-get($map, key):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中名称为</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">key</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的值</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  map-keys($map):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取指定</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中所有的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">key</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  map-values($map):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">获取指定</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中所有的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">value</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  map-has-key($map, key):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">判断在</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中是否包含指定的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">key</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  map-merge($map1, $map2):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">将</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map1</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map2</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">合并在一起</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;  map-remove($map, key):</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">将指定名称的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">key</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">从</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$map</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中移除</span></font></div></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.14sass布尔值</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">中的布尔值，跟其他语言一样，都是用来表示真</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">/</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">假的逻辑判断的。</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">取值：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">true/false,sass</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">中可以使用比较运算符，返回的就是布尔值</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">比较运算符</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt; &gt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;=</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;=</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">!=</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">==</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">逻辑运算符</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&gt; and</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">or</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">not</span></font></div></div><div style="font-size: 14px;"><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.15控制指令-control Directives</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中为了更加方便的处理一些带有逻辑性的样式，如满足某些条件的时候使用指定的样</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">式，或者根据指定列表中的项目循环输出样式等，提供了一些控制指令进行处理</span></font></div><div><font color="#0A9C0C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @if</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">：条件控制指令</span></font></div><div><font color="#0A9C0C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @for:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">循环指令</span></font></div><div><font color="#0A9C0C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @each:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">循环指令</span></font></div><div><font color="#0A9C0C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @while:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">循环指令</span></font></div></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">@if</span> <font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">指令是</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中的一个控制指令，用于在表达式</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">满足条件（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">true</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">）</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">的时候输出指定的</font></span></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">样式，在</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">不满足条件（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">false</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">）或者表达式为</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">null</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">的情况下输出其他的样式</font></span></font></div><div><font color="#05B20B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">【注】同样，也可以通过</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">@else if</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">@else</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">指令结合，进行多条件的判断</span></font></div></div><div><img src="day20_Sass.html.resources/52772E73-FBE4-4F23-BA2F-87A94865F604.png" height="306" width="501"/><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.16sass-@for</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">@for</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">指令在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中用于重复处理一组指令</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">有两种表现形式</span></font></div><div><font color="#009B0E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @for $var from &lt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">开始值</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; l &lt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">结束值</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt;</span></font></div><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#009B0E" style="font-size: 14px;">&gt; @for $var from &lt;start&gt; to &lt;end&gt;</font></span></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;1&gt;  to</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">through</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">都是表示一个区间</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;2&gt; </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">唯一的区别就是停止循环的地方不一样</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;3&gt;  $var</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以是任意一个变量名称如</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$i</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;5&gt;  &lt;start&gt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;end&gt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">表达式并且必须是整数</span></font></div></div><div><img src="day20_Sass.html.resources/B0CB9BB1-70F2-4014-AF23-259939DD52E8.png" height="166" width="518"/><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.17sass-@each</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">@each</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">Sass</span> <font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中主要被用来进行列表或者映射数据的循环</span></font></font></div><div><font color="#00A50E" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">主要表示形式：</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">@each $var in &lt;list&gt;</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">$var</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">可以是任意变量名称，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">&lt;list&gt;</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">表达式并且必须是</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">List</span></font></div></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/BDFEB190-21B1-48C6-AC4C-CC7387B55A88.png" height="211" width="760"/><br/></span></font></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.18sass-@while</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">@while</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">指令在</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中用于循环重复处理样式，直到</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">@while</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">表达式返回</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">false</span></font></div></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/1E3876EA-7E7F-418A-9551-17A15B45B3AC.png" height="99" width="470"/><br/></span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/AD9A1A96-0B0B-45F5-83EC-5ACA33A62D95.png" height="170" width="470"/><br/></span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.19sass用户自定义函数-function</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数的功能主要是数据的运算，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">SASS</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中可以将一些值交给函数进行处理，具体的处理方式</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">由定义的函数具体的设计确定。</span></font></div><div><font color="#00C509"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">@function</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">函数名称</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">参数列表</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">){</span></font></div><div><font color="#00C509"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(214, 214, 214); font-family: Monaco;"> //</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(214, 214, 214); font-family: Monaco;">数据处理</span></font></div><div><font color="#00C509"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; font-size: 20px; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">}</span></font></div></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/39BD3DCC-1319-47C0-A30B-11F8DED38D07.png" height="221" width="580"/><br/></span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">7.20sass警告 VS 错误</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在自己设计的函数或者</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Mixin</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中，可以包含一些警告或者错误提示信息，用户在错误使用</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数或者</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">mixin</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">时，就会看到这样的错误提示。</span></font></div><div><font color="#05B00B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @warn:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">警告信息</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">——</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">会出现在命令行窗口中，编译提示</span></font></div><div><font color="#05B00B" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">&gt; @error:</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">错误信息</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">——</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">会出现在编译后的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">css</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">文件中，错误提示</span></font></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">@warn message;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">警告信息，警告信息一般会在执行</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">scss</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">程序生成</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">css</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">时触发，所以</span></font></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">出现在命令行中。</span></font></div><div><font style="font-size: 18px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">@error message;</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">错误信息，错误信息直接显示在编译的</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">css</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">文件中。</span></font></div></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/CA4CD200-9396-4283-8BAB-1A1922278581.png" height="237" width="637"/><br/></span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"><img src="day20_Sass.html.resources/FC5E7F47-249D-4C5B-B9C5-4A11172EEB54.png" height="75" width="637"/><br/></span></span></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: 'Helvetica Neue'; font-weight: bold;">八、sass-总结</span></font></div><div><span style="-webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-size: 18px; font-family: 'PingFang SC'; font-style: normal; font-variant-caps: normal; font-variant-ligatures: no-common-ligatures; font-weight: normal; line-height: normal;">在时间充裕的情况下，最后页面，使用</span> <span style="-webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-size: 18px; font-family: Helvetica; font-style: normal; font-variant-caps: normal; font-variant-ligatures: no-common-ligatures; font-weight: normal; line-height: normal;">SASS</span> <span style="-webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-size: 18px; font-family: 'PingFang SC'; font-style: normal; font-variant-caps: normal; font-variant-ligatures: no-common-ligatures; font-weight: normal; line-height: normal;">完成样式处理。</span></div><div><span style="font-size: 14pt; font-family: 'PingFang SC';">【注】建scss文件，最后编译成css文件引入。 </span></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-size: 14px;"><br/></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div style="font-family: 'Helvetica Neue'; font-size: 14px;"/><div><br/></div><div><br/></div><div><br/></div></body></html>